<template>
	<view class="page">
<!--    地图标注服务说明-->
    <view class="banner">
      <image src="/static/images/banner1.jpg" mode="widthFix" style="width: 100%"></image>
    </view>
    <!--表单-->
    <view class="main container">
      <u-form labelPosition="top" labelWidth="100%" :labelStyle="{ marginBottom: '25rpx', color: 'rgba(60,156,255, 1)'}">
        <!--地图选择 多选，百度地图、高德地图、腾讯地图-->
        <u-form-item label="选择的地图套餐">
          {{ note }}
          <!--<u-checkbox-group v-model="map">-->
          <!--  <u-row customStyle="margin-bottom: 10px">-->
          <!--    <u-col span="6">-->
          <!--      <u-checkbox name="baidu" label="百度"></u-checkbox>-->
          <!--    </u-col>-->
          <!--    <u-col span="6">-->
          <!--      <u-checkbox name="gaode" label="高德"></u-checkbox>-->
          <!--    </u-col>-->
          <!--    <u-col span="6">-->
          <!--      <u-checkbox name="tengxun" label="腾讯"></u-checkbox>-->
          <!--    </u-col>-->
          <!--  </u-row>-->
          <!--</u-checkbox-group>-->
        </u-form-item>
        <!--店铺名称、联系电话、验证码-->
        <!--<u-form-item label="店铺名称">-->
        <!--  <u-input v-model="name" placeholder="请输入店铺名称"></u-input>-->
        <!--</u-form-item>-->
        <!--<u-form-item label="店铺地址">-->
        <!--  <u-input v-model="name" placeholder="请输入店铺地址"></u-input>-->
        <!--</u-form-item>-->
        <u-form-item label="联系电话">
          <u-input v-model="phone" placeholder="请输入联系电话"></u-input>
        </u-form-item>
        <u-form-item label="验证码">
          <u-input v-model="code" placeholder="请输入验证码"></u-input>
          <template #right>
            <view class="vcode-wrap">
              <u-button @click="sendCode" :disabled="time > 0">
                {{time > 0 ? `${time}s后重新获取` : '获取验证码'}}
              </u-button>
            </view>
          </template>
        </u-form-item>
        <view class="ag-wrap">
          <view class="agreement cell" @click="agreement = (agreement.includes('agreement') ? [] : ['agreement'])" >
            <view class="cell-hd">
              <u-checkbox-group
                  v-model="agreement"
                  placement="column"
              >
                <u-checkbox
                    label=" "
                    name="agreement"
                    @click="toAgreement"
                    activeColor="#3c9cff"
                    inactiveColor="#3c9cff"
                    size="14"
                >
                </u-checkbox>
              </u-checkbox-group>
            </view>
            <view class="cell-bd">
              <text>请阅读并同意<text class="link" @click.stop="toAgreement">《⽤户服务协议和隐私政策》</text></text>
            </view>
          </view>
        </view>
        <view class="btn-wrap">
          <u-button type="primary" @click="topPay" :loading="paying" loadingText="正在提交">开始标注</u-button>
        </view>
      </u-form>

      <!--标注流程说明-->
      <view class="flow">
        <view class="m-title">标注流程说明</view>
        <view class="item">
          <view class="title">1.确认地图标注服务</view>
          <view class="desc">输入手机号和验证码确认套餐</view>
        </view>
        <view class="item">
          <view class="title">2. 填写资料</view>
          <view class="desc">填写店铺信息，提交资质及门头照片</view>
        </view>
        <view class="item">
          <view class="title">3. 资料审核签约</view>
          <view class="desc">等待资质审核<view class="red">（1-7个工作日）</view></view>
        </view>
        <view class="item">
          <view class="title">4. 标注成功</view>
          <view class="desc">审核通过后，店铺信息将被标注到地图上</view>
        </view>
      </view>
      <mark-list></mark-list>
      <qa />
      <u-modal
          :show="showTip"
          title="提示"
          :showCancelButton="true"
          content='该手机已经购买过，点击确认查询详细信息。'
          @confirm="toInfo"
          @cancel="showTip = false"
      ></u-modal>
    </view>
    <u-modal
        :show="showAgreement"
        title="提示"
        :show-cancel-button="true"
        content='是否已阅读并同意⽤户服务协议和隐私政策？'
        confirmText="已阅读并同意"
        @confirm="agreementOk"
        @cancel="agreementCancel"
    ></u-modal>
	</view>
</template>

<script>
  import store from "../../store";
  import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
  import { getGoodsList, getOpenIdApi, payOrderApi, sendCode } from "../../api/common/common";
  import USwiper from "../../uni_modules/uview-ui/components/u-swiper/u-swiper.vue";
  import MarkList from "./mark-list.vue";
  import Qa from "./qa.vue";
  import UImage from '../../uni_modules/uview-ui/components/u--image/u--image.vue';
  import UForm from '../../uni_modules/uview-ui/components/u-form/u-form.vue';
	export default {
    components: {
      UForm,
      UImage,
      MarkList,
      USwiper,
      UButton,
      Qa
    },
		data() {
			return {
        showTip: false,
        openId: '',
        map: ['baidu', 'gaode', 'tengxun'],
        name: '',
        phone: '',
        code: '',
        channelNo: 'wx_mini', // 'A2000',
        time: 0,
        paying: false,
        productId: 'all_default',
        money: 9900,
        note: '百度地图 + 高德地图 + 腾讯地图',
        agreement: [],
        showAgreement: false,
			}
		},
		methods: {
      agreementOk(){
        this.agreement = ['agreement']
        this.showAgreement = false;
      },
      agreementCancel(){
        this.showAgreement = false;
      },
      toAgreement() {
        uni.navigateTo({
          url: "/pages/login/agreement/index"
        });
      },
      topPay(){
        //let money = 9900;
        //if(this.map.length === 0){
        //  uni.showToast({
        //    title: '请选择要标记的地图',
        //    icon: 'none'
        //  });
        //  return;
        //}
        //校验店铺名称
        //if(!this.name){
        //  uni.showToast({
        //    title: '请输入店铺名称',
        //    icon: 'none'
        //  });
        //  return;
        //}
        //校验联系电话
        if(!this.phone){
          uni.showToast({
            title: '请输入联系电话',
            icon: 'none'
          });
          return;
        }
        // 判断手机号格式
        if (!/^1[3456789]\d{9}$/.test(this.phone)) {
          uni.showToast({
            title: '手机号格式不正确',
            icon: 'none'
          });
          return;
        }
        //校验验证码
        if(!this.code){
          uni.showToast({
            title: '请输入验证码',
            icon: 'none'
          });
          return;
        }
        if (!this.agreement.includes('agreement')) {
          this.showAgreement = true;
          return;
        }
        //if(this.map.length === 1){
        //  money = '9900'
        //}
        //if(this.map.length === 2){
        //  money = 12800
        //}
        //if(this.map.length === 3){
        //  money = 15800
        //}
        const config = {
          name: this.name,
          phone: this.phone,
          code: this.code,
          payType: 'WX',
          link: 'https://shop-mark.csxql.cn/',
          channelNo: this.channelNo,
          money: this.money,
          productId: this.productId,
          openId: this.openId,
        }
        this.paying = true;
        payOrderApi(config).then( ({ result }) => {
          console.log(result)
          // {code: 200, message: "",…}
          // code: 200
          // message: ""
          // result: {appId: "wx874a0650e9f1acc8", timeStamp: "1718823103", nonceStr: "Z3rBi4u2BAjOkLGH",…}
          // appId: "wx874a0650e9f1acc8"
          // nonceStr: "Z3rBi4u2BAjOkLGH"
          // package: "prepay_id=wx20025144407403965ca5dbfa3e0b090001"
          // paySign: "EEDE284577DBE6AE01D1747985A73FFD"
          // signType: "MD5"
          // timeStamp: "1718823103"



          //发起微信支付
          wx.requestPayment({
            // timeStamp: result.timeStamp,
            // nonceStr: result.nonceStr,
            // package: result.package,
            // signType: result.signType,
            // paySign: result.paySign,
            ...result,
            success(r) {
              uni.navigateTo({
                url: '/pages/info/index'
              });
            },
            fail() {
              wx.showToast({
                title: '支付失败',
                icon: 'none'
              })
            }
          })

        }).catch((res) => {
          if (res.code === 3002) {
            this.showTip = true;
          }
        }).finally(() => {
          this.paying = false;
        });
      },
      toInfo(){
        uni.navigateTo({
          url: '/pages/info/index?phone=' + this.phone
        });
      },
      async sendCode () {
        await sendCode({ phone: this.phone }).catch(res => {
          if (res.code === 3002) {
            uni.navigateTo({
              url: '/pages/info/index?phone=' + this.phone
            });
          }
        });
        console.log('发送验证码');
        this.time = 60;
        const timer = setInterval(() => {
          this.time--;
          if(this.time <= 0){
            clearInterval(timer);
          }
        }, 1000);
      }
    },
    onLoad() {
      const self = this;
      getGoodsList({
        channelNo: this.channelNo,
      }).then(({ result }) => {
        result.forEach(item => {
          if(item.id === self.productId){
            self.productId = item.id;
            self.money = item.money;
            self.note = item.note;
            debugger
          }
        });
      });
		},
    onShow() {

    },
    onHide() {

    },
    created() {
      // 获取code
      // uni.login({
      //   provider: 'weixin',
      //   success: function (loginRes) {
      //     console.log('loginRes', loginRes);
      //     // 获取用户信息
      //     uni.getUserInfo({
      //       provider: 'weixin',
      //       success: function (infoRes) {
      //         console.log('infoRes', infoRes);
      //       }
      //     });
      //   }
      // });
      uni.login({
        provider: 'univerify',
        success: async (loginRes) => {
          console.log('获取code成功', loginRes);
          // 这里的loginRes.code就是用户的code
          const code = loginRes.code;
          const { result } = await getOpenIdApi({code});
          this.openId = result.openid;
        },
        fail: (err) => {
          console.log('获取code失败', err);
        }
      });
    }
	}
</script>

<style scoped lang="scss">
  .page{
    //background-color: #3C9CFF;
    //background: linear-gradient(direction, #3C9CFF, #fff);
    background: linear-gradient(to bottom, #3C9CFF, #fff);
    min-height: 100vh;
    *{
      box-sizing: border-box !important;
    }
  }
  .container{
    width: 100%;
    box-sizing: border-box;
    margin: auto;
    //border-radius: 20rpx;
  }
	.main {
    padding: 40rpx;
    background-color: #fff;
  }
  .banner{
    width: 100%;
    height: 550rpx;
  }
  .u-checkbox{
    margin-right: 40rpx;
  }
  .flow{
    background: #fff;
    //padding: 40rpx;
    margin-top: 40rpx;
    .m-title{
      text-align: center;
      font-size: 36rpx;
      margin-bottom: 60rpx;
      padding-top: 35px;
      font-weight: bold;
    }
    .item{
      width: 100%;
      box-sizing: border-box;
      padding: 0.9375rem 0.9375rem;
      background-color: #FFF;
      border: 1px solid #eee;
      border-radius: 0.375rem;
      margin-bottom: 0.625rem;
      position: relative;
      z-index: 1;
      .title{
        font-size: 32rpx;
        color: #333333;
      }
      .desc{
        font-size: 28rpx;
        margin-top: 30rpx;
        color: #888;
        .red{
          color: red;
          display: inline-block;
        }
      }
    }
  }
  .btn-wrap{
    margin-top: 40rpx;
  }
  .vcode-wrap{
    padding-left: 20rpx;
  }
  .u-checkbox{
    margin-right: 16rpx;
  }
  .ag-wrap{
    //position: absolute;
    bottom: 35rpx;
    margin: auto;
    width: 100%;
    text-align: center;
    padding: 15rpx 0;
    //padding-left: 115rpx;
  }
  .agreement{
    text-align: left;
    font-size: 32rpx;
    margin: auto;
    color: #999999;
    .link{
      color: #3C9CFF;
    }
  }
</style>
